<template>
  <div class="demo">
        <h2>姓名：{{name}}</h2> 
        <h2>性别：{{sex}}</h2>
        <h2>年龄：{{age}}</h2>
        <button @click="sendStudentName">点击传送学生姓名</button>
        <button @click="sendStudentNameToSchool">点击传送学生姓名给School</button>
  </div>
</template>

<script>

  export default {
    name:'MyStudent',
    data(){
      return{
        name:'周杰',
        sex:'男',
        age:'22',
      }
    },
     // (1) 别忘了钩子函数它直接是vm配置对象的属性，而不是写在methods里面
     mounted() {
      console.log(this.x)
     },
     methods: {
          sendStudentName(){
             this.$emit('click')
             this.$emit('atguigu','zhoujie')
          },
          sendStudentNameToSchool(){
             this.$bus.$emit('hello',this.name)
          }
    },
    /**
     * (2) 全局事件总线在给每一对组件绑定事件的时候，都有一个事件名，只能给他们俩使用
     *     别的组件无法再使用这个事件名子，因此为了避免 有第二组使用 正在使用的事件，
     *     需要在组件快销毁的时候解除绑定，这样其他组件就又可以使用同名事件
    */
    beforeDestroy(){
       this.$bus.off('hello')
    }
}
</script>

<style scoped>
  .demo{
     background-color: blanchedalmond;
     padding: 5px;
  }
</style>